<template>
  <div class="about">
    <h1>use vuex</h1>
    <div class="box">
      <button @click="setUpName()">取反</button>
      <button @click="setUpName('1')">取反1</button>
      <button @click="setUpName('2')">取反2</button>
      <p>{{ userStore.name }}</p>
    </div>
    <div class="box">
      <p>布尔</p>
      <button @click="getlist()">取反</button>
      {{ userManageStore.dataList }}
    </div>
     <myFooter />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import * as types from "@/store/mutation-types";

export default {
  props: {},
  computed: {
    ...mapState({
      userStore: (state) => state.user,
      userManageStore: (state) => state.userManage,
    }),
  },
  watch: {},
  data() {
    return {
      name: "",
    };
  },
  mounted() {},
  methods: {
    ...mapActions({
      SET_UP_NAME: types.SET_UP_NAME,
      USER_MANAGE_GET_LIST: types.USER_MANAGE_GET_LIST,
    }),
    setUpName(type) {
      if (type == 2) {
        this.SET_UP_NAME();
      } else if (type == 1) {
        this.$store.dispatch(types.SET_UP_NAME);
      } else {
        this.$store.dispatch("user/setUpName");
      }
    },
    getlist() {
      this.USER_MANAGE_GET_LIST();
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  padding: 10px;
  .box {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #222;
  }
}
</style>
